<template>
	<view>
		<!-- 列表 -->
		<view>
			
			<view v-for="(item,index) in newList" :key="index" @click="cardClick(item.id)"
				style="border-radius: 20rpx;display: flex;justify-content: center;margin: 20rpx;padding: 14rpx;background-color: #fff;">
				<view style="width: 260rpx;height: 190rpx;border-radius: 20rpx;overflow: hidden;">
					<image style="width: 100%;height: 100%;" :src="imgOne(item.newPic)" mode="aspectFill">
					</image>
				</view>
				<view style="width: 100%;margin-left: 20rpx;display: flex;flex-direction: column;">
					<view style="font-size: 28rpx;margin-bottom: 12rpx;">
						{{item.newTitle}}
					</view>
					<view
						style="margin-bottom: 12rpx;font-size: 26rpx;color: #909399;display: -webkit-box;-webkit-box-orient: vertical;-webkit-line-clamp: 2;overflow: hidden;text-overflow: ellipsis;">
						{{delTag(item.newContent)}}
					</view>
					<view style="margin-bottom: 12rpx;display: flex;line-height: 1em;">
						<u-icon name="map" size="16" color="#909399"></u-icon>
						<text style="font-size: 26rpx;color: #909399;">{{item.address}}</text>
					</view>
					<view style="display: flex;justify-content: flex-end;">
						<view style="margin-left: 10rpx;font-size: 22rpx;color: #909399;">{{item.createTime}}</view>
						<view
							style="margin-left: 10rpx;display: flex;justify-content: start;font-size: 22rpx;color: #909399;align-items: center;">
							<u-icon color="#20C3FE" name="eye"></u-icon>
							<text>{{item.lookNum}}</text>
						</view>
						<view
							style="margin-left: 10rpx;display: flex;justify-content: start;font-size: 22rpx;color: #909399;align-items: center;">
							<u-icon color="#ff5500" name="thumb-up"></u-icon>
							<text>{{item.up==null||item.up == ''?'0':item.up}}</text>
						</view>
						<view
							style="margin-left: 10rpx;display: flex;justify-content: start;font-size: 22rpx;color: #909399;align-items: center;">
							<u-icon name="more-circle" color="#ffaa00"></u-icon>
							<text>{{item.comments}}</text>
						</view>
					</view>
				</view>
			</view>
			
		</view>
		
	</view>
</template>

<script>
	import {
		getSocietyList
	} from '../../config/api'
	// const baseUrl = 'http://localhost:8080'
	import {mapGetters} from 'vuex'
	export default{
		data(){
			return{
				newList:[]
			}
		},
		onLoad() {
			this.getSocietyList()
		},
		computed:{
			...mapGetters(['getBaseUrl'])
		},
		methods:{
			// 获取new列表
			getSocietyList(){
				getSocietyList().then(res => {
					this.newList = res.data.data.map(item => {
						return {
							id: item.id,
							newTitle: item.newTitle,
							newContent: item.newContent,
							newPic:  item.newPic,
							lookNum: item.lookNum,
							up: item.up,
							comments: item.comments,
							createTime: item.createTime,
							address: item.address
						}
					})
				});
			},
			//移除HTML标签
			delTag(str) {
				return str.replace(/<[^>]+>/g, "");
			},
			// 取卡片对象的第一张图片
			imgOne(pic) {
				if(pic==null||pic==''){
					return '../../static/standbyLogo/zixun_logo.png'
				}else{
					let src = pic.split(",")[0];
					return this.getBaseUrl + src
				}
				
			},
			// 点击图片 -放大
			picClick(i) {
				console.log("点击");
				uni.previewImage({
					// 预览时，默认显示图片的索引
					current: i,
					// 所有图片 url 地址的数组
					urls: this.weekendPicList
				})
			},
			// 进入详情
			cardClick(id) {
				uni.navigateTo({
					url: `./society?id=${id}`
				})
			}
		}
	}
</script>

<style scoped lang="scss">
	
	.etcString {
		display: -webkit-box;
		-webkit-box-orient: vertical;
		-webkit-line-clamp: 1;
		overflow: hidden;
		text-overflow: ellipsis;
		font-size: 22rpx;
		border-radius: 10rpx;
		line-height: 40rpx;
		padding: 8rpx;
		color: #fff;
	}
	
</style>